<template>
  <div class="personEquipment">
    <div class="personEquipment-types">
      <div
        v-for="item in options"
        :key="item.type"
        :class="['item', personEquipmentType == item.type ? 'active' : '']"
        @click="onchange(item.type)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="personEquipment-content">
      <div class="personEquipment-content-header">
        <div
          class="th"
          v-for="item in listOptiopns"
          :key="item.name"
          :style="{ width: `calc(100% / ${columnCount})` }"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="personEquipment-content-list">
        <VirtualList
          ref="virtualScroll"
          style="height: 100%; overflow-y: auto;"
          data-key="id"
          :data-sources="data"
          :data-component="PersonEquipmentItem"
          :keeps="30"
          :extra-props="{
            options: listOptiopns,
            columnCount,
            onJump,
          }"
          class="content-scroll"
          @tobottom="onScrollBottom"
        >
        </VirtualList>
      </div>
    </div>
  </div>
</template>
<script>
import {getPersonEquipmentOptions} from "@/views/bigScreen/constant.js";
import VirtualList from "vue-virtual-scroll-list";
import PersonEquipmentItem from "@/views/bigScreen/components/Left/PersonEquipmentItem.vue";

export default {
  name: "PersonEquipment",
  components: {
    VirtualList,
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    areaId: {
      type: [String,Number],
      default: '',
    },
    personEquipmentType: {
      type: [String,Number],
      default: "",
    },
  },
  data() {
    return {
      scrollDistance: 0,
      speed: 0.2,
      animationId: null,
      PersonEquipmentItem,
    }
  },
  computed: {
    options() {
      const obj =  getPersonEquipmentOptions();
      const keys = Object.keys(obj);
      return keys.reduce((acc, key) => {
        const name = obj[key]?.name ?? '';
        const value = obj[key]?.value ?? '';
        acc.push({
          name,
          type: key,
          value,
        })
        return acc;
      }, []);
    },
    type() {
      return this.options?.find(item => item.type == this.personEquipmentType)?.value;
    },
    listOptiopns() {
      const type = this.personEquipmentType;
      return getPersonEquipmentOptions()?.[type]?.options ?? [];
    },
    columnCount() {
      return this.listOptiopns.length;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.scrollTo();
    });
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId);
  },
  methods: {
    onchange(type) {
      this.$bus.$emit("updatePersonEquipmentType", type);
    },
    scrollTo() {
      // 一次性滚动的距离
      this.scrollDistance += this.speed;
      const virtualScroll = this.$refs.virtualScroll;
      virtualScroll.scrollToOffset(this.scrollDistance);
      this.animationId = requestAnimationFrame(this.scrollTo);
    },
    onScrollBottom() {
      this.scrollDistance = 0;
    },
    onJump(data) {
      this.$bus.$emit("changeMapView", {data, type: this.type});
    },
  },
}
</script>

<style scoped lang="scss">
$trBgColor: rgba( 28, 73,104, .5);
$btnColor: #66bbf9;

.personEquipment {
  position: relative;
  height: 100%;
  font-size: 12px;
  &-types {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: $btnColor;
    .item {
      width: calc(100% / 3 - 6px);
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background: linear-gradient( 180deg, rgba(10,85,160,0.24) 0%, rgba(39,105,235,0) 100%);
      border-radius: 6px 6px 6px 6px;
      border: 1px solid rgba(11,81,160,0.5);
      font-size: 12px;
      &.active {
        background: linear-gradient( 179deg, #074786 0%, #1D84B6 100%);
        border-color: rgba(255,255,255,0.5);
        color: #fff;
      }
    }
  }
  &-content {
    text-align: center;
    color: #fff;
    height: calc(100% - 24px);
    padding-top: 4px;
    box-sizing: border-box;
    position: relative;

    &-header {
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      height: 27px;
      background-image: url("~@/assets/images/bigScreen/person/title_bg.png");
      background-size: cover 100%;
      .th {
        position: relative;
      }
    }
    &-list {
      height: calc(100% - 16px - 12px);
      overflow: hidden;
      ::v-deep {
        .content-scroll {
          -ms-overflow-style: none;
          scrollbar-width: none;

          &::-webkit-scrollbar {
            display: none;
          }
        }
        .tr {
          display: flex;
          align-items: center;
          height: 21px;
          //background: linear-gradient( 179deg, #074786 0%, #1D84B6 100%);
          //border-radius: 3px 3px 3px 3px;
          //border: 1px solid rgba(255,255,255,0.5);
          .td {
            line-height: 21px;
          }
        }
      }
    }
  }
}
</style>
